<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>离线任务缓存</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <link href="../../../css/mui.min.css" rel="stylesheet" />
    <link href="../css/common.css" rel="stylesheet" />
    <link href="../css/iconfont.css" rel="stylesheet" />
    <style>
      .mui-checkbox input[type=checkbox].checkbox{
       position: relative;
        top: 0;
        right: 0;
      }
      .footer{
        position: fixed;
        width: 100%;
        z-index: 9999;
        height: 44px;
        line-height: 44px;
        background-color: #fff;
        bottom: 0;
        padding: 0;
        text-align: center;
      }
    </style>
  </head>
  <body class="bg-white">
    <div id="container">
      <header class="mui-bar mui-bar-nav">
        <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
        <h1 class="mui-title">离线任务缓存</h1>
        <a class="mui-pull-right iconfont icon-bianji mui-right-icon" @click="edit()"> {{editShow?"完成":"编辑"}}</a>
      </header>
      <div class="mui-content bg-white">
        <ul class="mui-table-view commonList">
           <p class="padding-tb text-df text-grey text-center" v-if="list.length===0">暂无数据</p>
          <li class="flex justify-between align-center" v-for="item in list">
            <div class="mui-checkbox" v-show="editShow">
              <input name="checkbox" :value="item.id" type="checkbox" class="checkbox" v-model="checkModel"
                @change="checkChange()">
            </div>
            <div class="mui-table-cell flex-sub" style="padding-left: 6px;" @click="detail(item)">
              <p class="text-grey text-sm">模型变更</p>
              <p class="text-block text-df">{{item.targetName}}</p>
              <p class="text-grey text-sm"><span>{{time(item.createDate)}}</span> <span>{{item.createUserName}}</span></p>
            </div>
            <div class="tag-sm bg-red text-white text-sm round" @click="detail(item)">
              <span>模型修改</span>
            </div>
          </li>
        </ul>
        <div style="height: 50px;"v-if="editShow"></div>
      </div>
      <div class="footer flex shadow" v-if="editShow">
        <div class="flex-sub" @click="chooseAll">{{all?"取消全选":"全选"}}</div>
        <div class="flex-sub bg-red text-white" @click="Delete()">
          清除缓存
        </div>
      </div>
    </div>
    <script src="../../../js/mui.js"></script>
    <script src="../../../js/vue.js"></script>
    <script src="../../../js/mkeyplus.base.js"></script>
    <script src="../../../js/mui.pullToRefresh.js"></script>
    <script src="../../../js/mui.pullToRefresh.material.js"></script>
    <script src="../js/sqlite.js"></script>
    <script type="text/javascript">
      mui.init()
      var wait = null;
      var bdName = "files"; //数据库的名字
      var taskName = "offlineMytask"; //我的任务表
      mui.plusReady(function() {
        console.log('11111');
        if (!validBdOpen(bdName)) {
          createDb(bdName)
        }
        select();
      })
      wait = new Vue({
        el: '#container',
        data: {
          height1: 0, // 列表高度
          editShow: false,
          list: [],
          checkModel: [],
          all: false
        },
        created: function() {
          this.initHeight()
        },
        methods: {
          // 设置高度
          initHeight: function() {
            var height = window.innerHeight - 95;
            this.height1 = height;
          },
          taskType(row) {
            if (row.type == 2) {
              return '模型变更'
            }
          },
          detail: function(item) {
            mui.openWindow({
              url: '../help/taskDetail.html',
              id: '../help/taskDetail.html',
              createNew: true, //是否重复创建同样id的webview，默认为false:不重复创建，直接显示
              extras: {
                pageId: item.id
              }
            })
          },
          edit() {
            this.editShow = !this.editShow
            this.checkModel = []
          },
          checkChange() {
            var that = this;
            console.log(that.checkModel)
            var ids = []
            that.list.forEach(function(item, index) {
              ids.push(item.id);
            })
            if (that.checkModel.sort().toString() === ids.sort().toString()) {
              that.all = true
            } else {
              that.all = false
            }
          },
          chooseAll() {
            var that = this;
            if (!that.all) {
              that.list.forEach(function(item, index) {
                that.checkModel.push(item.id);
              })
            } else {
              that.checkModel = []
            }
            that.all = !that.all;
          },
          Delete() {
            var that = this;
            var btnArray = ['取消', '确定'];
            mui.confirm('确定删除吗？', '提示', btnArray, function(e) {
                if (e.index == 1) {
                  that.checkModel.forEach((item, index1) => {
                    selectListSQL(bdName, "delete from " + taskName + " WHERE id ='" + item + "'", function( data) {
                      select();
                      var page = plus.webview.getWebviewById('./home/home.html');
                      mui.fire(page, 'update');
                    });
                  })
                }  else {

              }
            })
        },
        time(time) {
          var time=parseInt(time);
          var date = new Date(time);
          var year = date.getFullYear();
          var mon = date.getMonth() + 1;
          var day = date.getDate();
          var hours = date.getHours();
          var minu = date.getMinutes();
          var sec = date.getSeconds();
          return year + '-' + mon + '-' + day + ' ' + hours + ':' + minu + ':' + sec;
        }
      }
      })

      function select() {
        selectListSQL(bdName, "select * from " + taskName + "",
          function(data) {
            console.log('查出数据表数据' + JSON.stringify(data));
            wait.list = [];
            if (data.length > 0) {
              wait.list = data;

              console.log(JSON.stringify(data[0]))
            }
          })
      }
      window.addEventListener("update", function(e) {
        console.log('更新离线数据')
        select();
      }); 
      </script>
  </body>

</html>
